<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器(三)——表单选择器</title>
</head>
<body>
    <fieldset>
        <legend>jQuery表单选择器示例</legend>
        <form>
            普通文本框：<input type="text"  placeholder="普通文本框"><br/>
            密码输入框：<input type="password"  placeholder="密码框"><br/>
            隐藏域(看不见的)：<input type="hidden" placeholder="隐藏域"><br/>
            文件上传域：<input type="file" placeholder="文件上传框"><br/>
            普通文本域：<textarea placeholder="普通文本域" rows="5" cols="22"></textarea><br/>
            单选下拉框：
            <select>
                <option value="0">单选下拉框——选项一</option>
                <option value="1">单选下拉框——选项二</option>
                <option value="2">单选下拉框——选项三</option>
            </select>
            <br/>
            多选下拉框：
            <select multiple="multiple">
                <option value="3">多选下拉框——选项一</option>
                <option value="4">多选下拉框——选项二</option>
                <option value="5">多选下拉框——选项三</option>
            </select>
            <br/>
            <!--这是一组单选按钮，同一个组的单选按钮名字必须相同，否则无法实现单选-->
            单选按钮1：<input type="radio" placeholder="单选按钮1" name="radio1">
            单选按钮2：<input type="radio" placeholder="单选按钮2" name="radio1"><br/>
            复选框1：<input type="checkbox" placeholder="复选框1">
            复选框2：<input type="checkbox" placeholder="复选框2">
            复选框3：<input type="checkbox" placeholder="复选框3">
            <br/>
            <input type="button" value="普通按钮">
            <input type="submit" value="提交按钮">
            <input type="reset" value="重置按钮">
        </form>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
         *      //页面加载完成后的处理，固定写法
         * });
     *
     */
    $(function () {
        console.log("$(\":input\")获取所有input,textarea,select和button元素");
        var eleArr = $(":input");//获取所有input,textarea,select和button元素
        console.log(eleArr);
        console.log("$(\":text\")获取所有的单行文本框");
        var textInputArr = $(":text");//获取所有的单行文本框，其实就是根据元素的type去获取的
        console.log(textInputArr);
        console.log("$(\":password\")获取所有的密码框");
        var pwdInputArr = $(":password");//获取所有的密码框
        console.log(pwdInputArr);
        console.log("$(\":radio\")获取所有的单选按钮");
        var radioArr = $(":radio");//获取所有的单选按钮
        console.log(radioArr);
        console.log("$(\":checkbox\")获取所有的复选框");
        var checkboxArr = $(":checkbox");//获取所有的复选框
        console.log(checkboxArr);
        console.log("$(\":reset\")获取所有重置按钮");
        var resetBtnArr = $(":reset");//获取所有重置按钮
        console.log(resetBtnArr);
        console.log("$(\":submit\")获取所有提交按钮");
        var submitBtnArr = $(":submit");//获取所有提交按钮
        console.log(submitBtnArr);
        console.log("$(\":button\")获取所有button按钮");
        var btnArr = $(":button");//所有button按钮
        console.log(btnArr);
        console.log("$(\":file\")获取所有文件域");
        var fileArr = $(":file");//获取所有文件域
        console.log(fileArr);
        console.log("$(\"input:checked\")获取所有选中的元素");
        var checkedArr = $("input:checked");//获取所有选中的元素
        console.log(checkedArr);
        console.log("$(\"select option:selected\")获取下拉框中所有选中的option元素");
        var selectedOptionArr = $("select option:selected");//获取下拉框中所有选中的option元素
        console.log(selectedOptionArr);
    });
</script>
</html>